<template>
  <nav aria-label="breadcrumb" :class="['axiom-pc-breadcrumb', { 'is-bordered': bordered }]">
    <ol>
      <li v-for="(item, index) in items" :key="item.text">
        <span v-if="index !== 0" class="separator">{{ separator }}</span>
        <router-link
          v-if="!item.disabled"
          :to="item.to"
          class="breadcrumb-link"
        >
          {{ item.text }}
        </router-link>
        <span v-else class="breadcrumb-text">{{ item.text }}</span>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  name: 'AxiomPCBreadcrumb',
  props: {
    items: {
      type: Array,
      required: true,
      default: () => [], // e.g., [{ text: 'Home', to: '/', disabled: false }]
    },
    separator: {
      type: String,
      default: '/',
    },
    bordered: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped lang="scss">
// All styles for this component are managed in the corresponding SCSS file
// in src/styles/components/pc/_axiom-pc-breadcrumb.scss
</style>